Timings
import { getConsoleForNamespace } from './console'
const console = getConsoleForNamespace('timings')
const timings = {};
export const getPrev = () =>
(typeof localStorage !== "undefined" && localStorage.getItem("litTimings")) ||
"";
export const time = (ns, marker) => {
const now = Date.now();
timings[ns] = (!marker || ! timings[ns])
? {
start: now,
marks: [],
timeTo: {},
}
: timings[ns];
timings[ns].marks.push({ marker, time: now });
if (marker) {
const id = now;
const took = now - timings[ns].start;
const index = timings[ns].marks.length;
timings[ns].timeTo[marker] = took;
console.log(`[timings][${ns}] "start" to "${marker}" took ${took}ms`);
const log = JSON.stringify({ ns, marker, id, took, index }) + "\n";
if (typeof localStorage !== "undefined")
localStorage.setItem("litTimings", getPrev() + log);
}
};
export const getTimings = () => timings;
import { VegaLite } from "https://cdn.skypack.dev/react-vega";
export const viewer = ({ node, React }) => {
let spec, error;
try {
spec = JSON.parse(node.data.value);
} catch (err) {
error = error.message;
}
return error || <VegaLite spec={spec} renderer="svg" />;
};
codecell .vega-embed {
max-width: 100%;
overflow: auto !important;
}
const raw = localStorage.getItem("litTimings");
const json = (obj) => JSON.stringify(obj, null, 2);
const events = {};
const logs = raw
.split("\n")
.map((l) => {
try {
const data = JSON.parse(l);
events[data.marker] = events[data.marker] || [];
const idx =
"000000".slice(0, 0 - data.index.toString().length) +
data.index.toString();
events[data.marker].push(data.took);
data.title = `${data.ns}-${idx}-${data.marker}`;
return data;
} catch (err) {}
})
.filter((x) => x);
const avg = (arr) => arr.reduce((a, x) => a + x, 0) / arr.length;
const aggregates = {};
Object.keys(events).map((event) => {
const ev = events[event];
aggregates[event] = {
min: Math.min(...ev),
max: Math.max(...ev),
mean: avg(ev),
n: ev.length,
};
});
// const values = Object.entries(aggregates).map( ([k,v])=>({id:k, ...v}))
const values = Object.entries(events).map(([k, v]) => ({ id: k, value: v }));
const spec = {
// $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
description: "A simple bar chart with embedded data.",
data: { values: logs },
mark: "errorbar",
encoding: {
y: { field: "title", type: "ordinal" },
x: { field: "took", type: "quantitative" },
},
};
return json(spec);
return aggregates;
return events;
return logs;
return raw;
Runs
So far the majority of time before complete is spent fetching files from the remote, 3s to read file, doubled by config, +1s for manifest. Of ~30 samples, with service worker disabled and GitHub connected.